KnockoutJS একটি শক্তিশালী JavaScript লাইব্রেরি যা Model-View-ViewModel (MVVM) ডিজাইন প্যাটার্ন অনুসরণ করে এবং এটি ডেটা-বাইন্ডিং এবং ডিপেনডেন্সি ট্র্যাকিংয়ের মাধ্যমে ইউজার ইন্টারফেস পরিচালনা করে। Observable Array একটি গুরুত্বপূর্ণ বৈশিষ্ট্য যা KnockoutJS তে ব্যবহার করা হয়, এবং এটি ডেটা ম্যানেজমেন্ট এবং UI এর মধ্যে ইন্টারঅ্যাকশনকে আরও সহজ এবং ডাইনামিক করে তোলে।
Observable Array কী?
Observable Array হল একটি বিশেষ ধরনের observable যা অ্যারে ডেটা হ্যান্ডল করতে সক্ষম। এটি KnockoutJS এর সাধারণ observable এর মতো কাজ করে, তবে এটি অ্যারে ডেটা ট্র্যাক করার জন্য আরও কিছু অতিরিক্ত ফিচার প্রদান করে। Observable Array এর মাধ্যমে আপনি সহজেই অ্যারে উপাদানগুলিতে পরিবর্তন ট্র্যাক করতে পারেন এবং সেই পরিবর্তনগুলি UI তে প্রতিফলিত হয়।
KnockoutJS তে observableArray ব্যবহার করে আপনি অ্যারে মধ্যে যে কোনো পরিবর্তন (যেমন, যোগ, মুছা, পরিবর্তন ইত্যাদি) স্বয়ংক্রিয়ভাবে UI তে দেখতে পাবেন।
Observable Array এর ব্যবহার:
KnockoutJS তে observableArray তৈরি করতে ko.observableArray() মেথড ব্যবহার করা হয়।
১. Observable Array তৈরি করা:
// Observable Array তৈরি করা
var fruits = ko.observableArray(["Apple", "Banana", "Orange"]);
এখানে, ko.observableArray() একটি নতুন observable array তৈরি করছে, যা প্রথমে "Apple", "Banana", এবং "Orange" মান ধারণ করে।
২. Observable Array থেকে ডেটা রিট্রিভ করা:
আপনি সহজেই observable array থেকে ডেটা রিট্রিভ করতে পারেন:
console.log(fruits()); // Output: ["Apple", "Banana", "Orange"]
এখানে, fruits() এর মাধ্যমে অ্যারে ডেটা অ্যাক্সেস করা হচ্ছে। fruits() কে কল করলে আপনি Observable Array এর বর্তমান ডেটা পাবেন।
৩. Observable Array তে ডেটা যোগ করা:
KnockoutJS তে observableArray.push() ব্যবহার করে নতুন উপাদান অ্যারে তে যোগ করা যায়।
fruits.push("Grapes");
console.log(fruits()); // Output: ["Apple", "Banana", "Orange", "Grapes"]
এখানে, push() মেথড ব্যবহার করে "Grapes" উপাদানটি অ্যারে তে যোগ করা হয়েছে।
৪. Observable Array থেকে ডেটা মুছা:
KnockoutJS তে observableArray.remove() মেথড ব্যবহার করে অ্যারে থেকে কোনো আইটেম মুছে ফেলা যেতে পারে।
fruits.remove("Banana");
console.log(fruits()); // Output: ["Apple", "Orange", "Grapes"]
এখানে, remove() মেথডের মাধ্যমে "Banana" উপাদানটি অ্যারে থেকে মুছে ফেলা হয়েছে।
৫. Observable Array তে আইটেম আপডেট করা:
আপনি observableArray.replace() মেথড ব্যবহার করে কোন আইটেম পরিবর্তন করতে পারেন:
fruits.replace("Orange", "Pineapple");
console.log(fruits()); // Output: ["Apple", "Pineapple", "Grapes"]
এখানে, replace() মেথডের মাধ্যমে "Orange" আইটেমটি পরিবর্তন করে "Pineapple" করা হয়েছে।
৬. Observable Array এর সাথে অন্যান্য Array মেথড:
KnockoutJS observableArray তে অন্যান্য সাধারণ অ্যারে মেথড যেমন pop(), shift(), unshift() ইত্যাদি সমর্থন করে।
fruits.pop(); // Removes "Grapes"
console.log(fruits()); // Output: ["Apple", "Pineapple"]
HTML এর মধ্যে Observable Array ব্যবহার:
KnockoutJS এর observableArray এবং data-bind ব্যবহার করে আপনি সহজেই UI তে ডেটা প্রদর্শন করতে পারেন।
উদাহরণ: HTML এ Observable Array প্রদর্শন:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KnockoutJS Observable Array</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-min.js"></script>
</head>
<body>
<h2>Fruits List</h2>
<ul data-bind="foreach: fruits">
<li data-bind="text: $data"></li>
</ul>
<input type="text" id="newFruit" />
<button data-bind="click: addFruit">Add Fruit</button>
<script>
function AppViewModel() {
this.fruits = ko.observableArray(["Apple", "Banana", "Orange"]);
this.addFruit = () => {
var newFruit = document.getElementById("newFruit").value;
if (newFruit) {
this.fruits.push(newFruit); // Add new fruit to the array
document.getElementById("newFruit").value = ''; // Clear the input field
}
};
}
ko.applyBindings(new AppViewModel());
</script>
</body>
</html>
এখানে:
data-bind="foreach: fruits"এর মাধ্যমেfruitsobservable array-এর সমস্ত আইটেম একটি<ul>এলিমেন্টে লুপ করে প্রদর্শিত হচ্ছে।addFruitমেথডের মাধ্যমে ইনপুট ফিল্ড থেকে নতুন একটি ফল অ্যারে তে যোগ করা হচ্ছে।- KnockoutJS এর মাধ্যমে UI তে ডেটা পরিবর্তন হলে তা স্বয়ংক্রিয়ভাবে আপডেট হবে।
Observable Array এর বৈশিষ্ট্য এবং সুবিধা:
- Dynamic Updates: Observable Array তে আইটেম যোগ, মুছা বা পরিবর্তিত হলে UI স্বয়ংক্রিয়ভাবে আপডেট হয়।
- Efficient Memory Usage: শুধুমাত্র প্রয়োজনীয় ডেটা লোড করে মেমরি ব্যবহারের পরিমাণ কমানো যায়।
- Reactivity: Observable Arrays ডেটার উপর নির্ভরশীল উপাদানগুলিকে স্বয়ংক্রিয়ভাবে আপডেট করে, যা ডাইনামিক ইউআই তৈরি করতে সহায়ক।
- Looping: সহজে অ্যারে ডেটা লুপ করে UI তে উপস্থাপন করা যায়।
Observable Array হল KnockoutJS এর একটি অত্যন্ত শক্তিশালী বৈশিষ্ট্য, যা ডেটাবেস, ফর্ম বা লিস্ট হ্যান্ডলিং এর জন্য অত্যন্ত কার্যকর। এটি two-way data binding এর মাধ্যমে ডেটা এবং UI এর মধ্যে সম্পর্ক স্থাপন করে, এবং ডেটার কোনো পরিবর্তন হলে তা UI তে স্বয়ংক্রিয়ভাবে আপডেট হয়। KnockoutJS এর observableArray ব্যবহার করে আপনি সহজেই ডেটার অ্যাড, রিমুভ, বা আপডেট ম্যানেজ করতে পারেন এবং তা UI তে বাস্তব সময়ের পরিবর্তন দেখাতে পারেন।
Read more
